<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template #filter-content>

        <el-input v-model="listQuery.params.name" placeholder="搜索讲师" style="width: 200px;" class="filter-item" />

        <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">
          添加
        </el-button>

      </template>

      <template #data-columns>

        <el-table-column
          label="讲师姓名"
          prop="name"
        />

        <el-table-column
          label="讲师头衔"
          prop="title"
          align="center"
        />

        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
        />

        <el-table-column
          label="操作"
          align="center"
        >

          <template v-slot="scope">
            <el-button size="small" type="default" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          </template>

        </el-table-column>

      </template>

    </data-table>

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="讲师名称" width="500px">

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px">

        <el-form-item label="讲师名" prop="name">
          <el-input v-model="postForm.name" />
        </el-form-item>

        <el-form-item label="头衔" prop="title">
          <el-input v-model="postForm.title" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import { saveData } from '@/api/course/lecturer'
import DataTable from '@/components/DataTable'

export default {
  components: { DataTable },
  data() {
    return {

      rules: {

        name: [
          { required: true, message: '讲师名称不能为空！' }
        ],
        title: [
          { required: true, message: '讲师头衔不能为空！' }
        ]
      },

      dialogVisible: false,

      postForm: {

      },

      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },

      options: {

        // 可批量操作
        multi: true,

        // 批量操作列表
        multiActions: [
          {
            value: 'delete',
            label: '删除'
          }
        ],
        // 列表请求URL
        listUrl: '/api/course/lecturer/paging',
        // 删除请求URL
        deleteUrl: '/api/course/lecturer/delete'
      }
    }
  },
  methods: {

    handleAdd() {
      this.postForm = {}
      this.dialogVisible = true
    },

    handleUpdate(row) {
      this.dialogVisible = true
      this.postForm = row
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        saveData(this.postForm).then(() => {
          this.$message({
            type: 'success',
            message: '讲师保存成功!'
          })
          this.dialogVisible = false
          this.$refs.pagingTable.getList()
        })
      })
    }
  }
}
</script>
